<template>
  <el-form :model="data" ref="form" class="form">
    <div class="addGroupBtnBox">
      <el-button @click="addGroup()" plain class="addGroupBtn"
        >自定义<i class="el-icon-plus el-icon--right"></i
      ></el-button>
    </div>
    <div
      class="attrBox"
      v-for="(saleAttr, saleAttrIndex) in data.saleAttrs"
      :key="saleAttrIndex"
    >
      <el-tag size="medium" class="attrNameBox">
        <span
          ><i
            v-if="data.deleteMode[saleAttrIndex]"
            @click="deleteGroup(saleAttr)"
            class="el-icon-delete"
          ></i
          >{{ saleAttr.name }}</span
        >
        <span
          style="cursor: pointer"
          @click="switchDeleteMode(saleAttrIndex)"
          >{{ data.deleteMode[saleAttrIndex] ? "完成" : "编辑" }}</span
        >
      </el-tag>
      <!-- 编辑属性 -->
      <div class="attrEditBox" v-if="data.deleteMode[saleAttrIndex]">
        <el-tag
          type="info"
          :key="option.attrOptionSn"
          v-for="option in saleAttr.optionList"
          closable
          :disable-transitions="false"
          @close="deleteAttr(saleAttr, option)"
        >
          {{ option.attrValue }}
        </el-tag>
        <el-button @click="addAttr(saleAttr)" plain class="addAttrBtn"
          >自定义<i class="el-icon-plus el-icon--right"></i
        ></el-button>
      </div>
      <!-- 选择属性 -->
      <div class="attrCheckBox" v-if="!data.deleteMode[saleAttrIndex]">
        <el-checkbox
          v-for="option in saleAttr.optionList"
          :key="option.attrOptionSn"
          v-model="option.selected"
          @change="$parent.$parent.attrCheckGroupChange()"
          >{{ option.attrValue }}</el-checkbox
        >
      </div>
    </div>
  </el-form>
</template>

<script>
import productFormMixins from "@/views/base/productForm";
import jsonUtils from "@/utils/jsonUtils";
import productApi from "@/api/productApi";

export default {
  name: "spuUpdateSaleAttrForm",
  mixins: [productFormMixins],
  props: ["spuInfo"],
  data() {
    return {
      init: {
        deleteMode: [],
        saleAttrs: [],
      },
      data: {
        deleteMode: [],
        saleAttrs: [],
      },
    };
  },
  methods: {
    initData() {
      if (this.spuInfo.saleAttrs) {
        this.data.saleAttrs = jsonUtils.deepCopy(this.spuInfo.saleAttrs);
        this.data.saleAttrs.forEach((saleAttr) => {
          this.data.deleteMode.push(false);
        });
      }
    },
    getData() {
      var selectedSaleAttrList = [];
      this.data.saleAttrs.forEach((saleAttr) => {
        var options = saleAttr.optionList.filter((option) => option.selected);
        if (options.length > 0) {
          selectedSaleAttrList.push(options);
        }
      });

      var combinedSaleAttrList =
        selectedSaleAttrList.length > 0
          ? jsonUtils.combineAndFlattern(selectedSaleAttrList)
          : [];

      // 设置排序信息
      var initAttrSort = 100;
      var initValueSort = 100;
      this.data.saleAttrs.forEach((saleAttr) => {
        saleAttr.sort = initAttrSort++;
        initValueSort = 100;
        saleAttr.optionList.forEach(option => {
          option.sort = initValueSort++;
        })
      });
      return {
        saleAttrs: this.data.saleAttrs,
        combinedSaleAttrList: combinedSaleAttrList,
      };
    },
    switchDeleteMode(saleAttrIndex) {
      this.$set(
        this.data.deleteMode,
        saleAttrIndex,
        !this.data.deleteMode[saleAttrIndex]
      );
    },
    addGroup() {
      this.$prompt("请输入规格名称", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        closeOnPressEscape: false,
        inputPattern: /.+./,
        inputErrorMessage: "规格名称不能为空",
      })
        .then(({ value }) => {
          console.log(222)
          productApi.group
            .buildAttr(value)
            .then((res) => {
              this.data.saleAttrs.push(res.data);
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
    deleteGroup(saleAttr) {
      this.$confirm("确定删除分组 [ " + saleAttr.name + " ] ?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var saleAttrs = this.data.saleAttrs;
          var index = -1;
          for (var i in saleAttrs) {
            if (saleAttrs[i].id == saleAttr.id) {
              index = i;
            }
          }
          if (index != -1) {
            saleAttrs.splice(index, 1);
          }
        })
        .catch(() => {});
    },
    deleteAttr(saleAttr, option) {
      var optionList = saleAttr.optionList;
      var index = -1;
      for (var i in optionList) {
        if (optionList[i].attrOptionSn == option.attrOptionSn) {
          index = i;
        }
      }
      if (index != -1) {
        optionList.splice(index, 1);
      }
    },
    addAttr(saleAttr) {
      this.$prompt("请输入属性名称", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        closeOnPressEscape: false,
        inputPattern: /.+./,
        inputErrorMessage: "属性名称不能为空",
      })
        .then(({ value }) => {
          productApi.group
            .buildAttrOption(saleAttr.name, value)
            .then((res) => {
              saleAttr.optionList.push(res.data);
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
.form {
  overflow: auto;
  height: 60vh;
  padding-right: 20px;
  .addGroupBtnBox {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    .addGroupBtn {
    }
  }
  .attrBox {
    margin-bottom: 40px;
    .attrNameBox {
      display: flex;
      margin-bottom: 15px;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      font-size: 14px;
      span i {
        margin-right: 10px;
        cursor: pointer;
      }
    }
    .attrEditBox,
    .attrCheckBox {
      margin-bottom: 15px;
      margin-left: 3px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .el-checkbox {
        line-height: 31px;
      }
      .el-tag {
        margin: 0px 10px 10px 0px;
      }
      .el-tag:last-child {
        margin-right: 0px;
      }
      .addAttrBtn {
        margin-bottom: 10px;
      }
    }
  }
}
</style>